<template>
	<view class="u-p-t-20">

		<view class="u-p-28 bg-white">
			<view class="border-title">
				最新留言
			</view>

			<!-- 暂无留言 -->
			<no-data v-if="!list || list.length === 0" :icon="noComment" text="暂无留言" width="56px" height="56px">
			</no-data>
			<view @click="showDetailModal(item)" v-else v-for="item in list" :key="item.id">
				<view class="u-flex u-row-between u-m-t-14 u-p-b-14">
					<u-image shape="circle" width="26px" height="26px" :src="item.avatar">
					</u-image>
					<view class="u-m-l-16 u-flex-1">
						<view class="u-font-12" style="color:#747474;">
							{{item.nickname}}
						</view>
						<view class="u-flex u-font-12" style="color: #C4C0C0;">
							<text class="u-m-r-8">{{item.create_time}}</text>
						</view>
					</view>
					<view @tap.stop="replay(item)" class="u-m-r-24 replay">
						<text class="u-m-r-24 btn">回复</text>
						<text>|</text>
					</view>
					<view @tap.stop="like(item)" class="u-flex u-col-center">
						<u-icon class="u-m-r-4" :name="item.is_thumb === 1?'heart-fill':'heart'" size="28"></u-icon>
						<text>{{item.likes_count}}</text>
					</view>

				</view>
				<view class="u-font-14 u-p-l-68 color-3">
					{{item.content}}
				</view>
				<view v-if="item.children && item.children.length" class="children">
					<view v-for="sub in item.children" :key="sub.id" class="u-line-1 u-m-b-14">
						<text class="nick">{{sub.nickname}}：</text>
						<text class="content">{{sub.content}}</text>
					</view>

					<view v-show="item.children_count > 3" class="u-m-b-14">
						<text class="nick">共{{item.children_count}}条评论</text>
						<u-icon name="arrow-right"></u-icon>
					</view>

				</view>
			</view>


			<!-- 留言详情弹框 -->
			<u-popup v-model="show" mode="bottom" @click="show = false" :border-radius="16">
				<view class="warp">
					<view class="rect" @tap.stop>
						<view class="box">
							<view @click="show = false" class="title u-p-l-28">
								<u-icon name="close"></u-icon>
							</view>

							<!-- 一级留言列表 -->
							<view class="u-flex u-row-between u-p-b-14 u-p-l-28 u-p-r-28 bg-white">
								<u-image shape="circle" width="26px" height="26px" :src="info.avatar">
								</u-image>
								<view class="u-m-l-16 u-flex-1">
									<view class="u-font-12" style="color:#747474;">
										{{info.nickname}}
									</view>
									<view class="u-flex u-font-12" style="color: #C4C0C0;">
										<text class="u-m-r-8">{{info.create_time}}</text>
									</view>
								</view>
								<view @tap.stop="replay(info)" class="u-m-r-24 replay">
									<text class="u-m-r-24 btn">回复</text>
									<text>|</text>
								</view>
								<view @tap.stop="like(info)" class="u-flex u-col-center">
									<u-icon class="u-m-r-4" :name="info.is_thumb === 1?'heart-fill':'heart'" size="28">
									</u-icon>
									<text>{{info.likes_count}}</text>
								</view>
							</view>
							<view style="padding-left: 96rpx;" class="u-font-14 u-p-b-28 u-p-r-28  color-3 bg-white">
								{{info.content}}
							</view>

							<view class="bg-f8 u-p-28 color-3 u-font-16">
								回复
							</view>

							<scroll-view :scroll-y="true" style="height: 600rpx;">
								<view class="bg-f8 u-p-28" v-for="item in info.children" :key="item.id">
									<view class="u-flex u-row-between u-m-t-14 u-p-b-14">
										<u-image shape="circle" width="26px" height="26px" :src="item.avatar">
										</u-image>
										<view class="u-m-l-16 u-flex-1">
											<view class="u-font-12" style="color:#747474;">
												{{item.nickname}}
											</view>
											<view class="u-flex u-font-12" style="color: #C4C0C0;">
												<text class="u-m-r-8">{{item.create_time}}</text>
											</view>
										</view>
										<view @tap.stop="like(item)" class="u-flex u-col-center">
											<u-icon class="u-m-r-4" :name="item.is_thumb === 1?'heart-fill':'heart'"
												size="28">
											</u-icon>
											<text>{{item.likes_count}}</text>
										</view>
									</view>
									<view class="u-font-14 u-p-l-68 color-3">
										{{item.content}}
									</view>
								</view>
							</scroll-view>

						</view>
					</view>
				</view>
			</u-popup>



		</view>
	</view>
</template>

<script>
	import noData from '@/components/noData/noData.vue';
	import {
		getCommentsList,
		giveLike,
		getCommentsOne
	} from '@/api/community';
	export default {
		props: ['oid', 'type'],
		// type 1领养评论 2寻宠评论 3寻主评论 4社区帖子
		// oid 评论对象id
		name: "commentList",
		components: {
			noData,
		},
		data() {
			return {
				list: null,
				noComment: require('@/static/index/no_comment.png'),
				show: false,
				info: {},
				commentId: null,
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			showDetailModal(item) {
				this.commentId = item.id;
				if (item.children_count > 3) {
					this.getCommentsOne();
					this.show = true;
				}
			},
			async getCommentsOne() {
				const res = await getCommentsOne({
					id: this.commentId
				});
				this.info = res.data;
			},
			async getList() {
				const res = await getCommentsList({
					oid: this.oid,
					type: this.type
				})
				this.list = res.data.list;
			},
			async replay(item) {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {
					uni.navigateTo({
						url: `/pagesIndex/comment/comment?oid=${this.oid}&type=${this.type}&parent_id=${item.id}`,
					});
				}
			},
			async like(item) {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {
					await giveLike({
						comment_id: item.id
					});
					uni.showToast({
						title: item.is_thumb === 1 ? '取消点赞成功' : '点赞成功',
						icon: "none",
						mask: true,
					});
					this.getList();
					if (this.show) {
						this.getCommentsOne();
					}
					this.$emit('refresh')
				}

			}
		},
	}
</script>
<style lang="scss" scoped>
	.border-title {
		&::before {
			height: 70%;
		}
	}

	.replay {
		color: #E9E9E9;

		.btn {
			display: inline-block;
			width: 36px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			background: #E9E9E9;
			border-radius: 4px;
			font-size: 12px;
			color: #656565;
		}
	}

	.children {
		margin-top: 20rpx;
		width: 626rpx;
		background: #F8F8F8;
		border-radius: 4px;
		padding: 20rpx;
		font-size: 14px;
		color: #333;
		margin-left: 68rpx;

		.nick {
			color: #3B4060;
		}
	}

	.box {
		.title {
			height: 40px;
			background-color: #fff;
			border-radius: 8px 8px 0px 0px;
			display: flex;
			align-items: center;
		}
	}
</style>
